<template>
	<view class="search-page page">
		<u-navbar  title="" back-text="新房分销" :is-back="true"  :background="{ background: '#000' }" :back-text-style="{color:'#FFF'}" back-icon-color="#fff"> </u-navbar>
		<u-picker mode="region" v-model="show" @confirm="sureCity"  ></u-picker>  
		<view class="flex search-line">
			<view class="addr-btn" @click="show=true">
				<u-icon name="map-fill" color="#000" size="28"></u-icon> {{ city }}
			</view>
			<u-search v-model="keyword" placeholder="搜索街道/楼盘名" placeholder-color="#CCC" :show-action="false" @search="search()"></u-search>
		</view>
		<u-dropdown  active-color="#FBD100" style="flex:none">
			<u-dropdown-item v-model="col1.value" :title="col1.label" :options="options1" @change="change1"></u-dropdown-item>
			<u-dropdown-item v-model="col2.value" :title="col2.label" :options="options2" @change="change2"></u-dropdown-item>
			<u-dropdown-item v-model="col3.value" :title="col3.label" :options="options3" @change="change3"></u-dropdown-item>
			<u-dropdown-item v-model="col4.value" :title="col4.label" :options="options4" @change="change4"></u-dropdown-item>
		</u-dropdown>
		
		

 
   <scroll-view  class="main search-content" scroll-y="true" scroll-with-animation="true" 
   @scrolltolower="handleScrollEnd"
   @scroll="handleScroll">
               
               <view class="item search-item "  v-for="(item,index) in list " :key="index"  @click="onChoose(item)">
               <view class="bg-img" :style="getItemImg(item)"></view>
               <view class="bg-title-txt"> {{   item.propertyName }}</view>
               <view class="tags flex">
                 <view class="tag">测试</view>
                 <view class="tag">测试</view>
               </view>
               <view class="attrs flex">
                 <view class="attr attr1">测试</view>
                 <view class="attr attr2">测试</view>
                 <view class="attr attr3">测试</view>
               </view> 
			 </view>
 </scroll-view>
		   
 
  
		<tabBar />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				title:"二手共盘",
				keyword: '', 
				col1:{ label: '区域', value: 0 },
				col2:{ label: '状态', value: 0 },
				col3:{ label: '类型', value: 0 },
				col4:{ label: '排序', value: 0 },
				options1: [ { label: '区域', value: 0 }, ],
				options2: [ 
				  { label: '状态', value: 0 }, 
				  { label: '再租', value: 1 }, 
				  { label: '已租', value: 2 }, 
				  { label: '在售', value: 3 }, 
				  { label: '已售', value: 4 }, 
				],
				options3: [ 
				  { label: '类型', value: 0 }, 
				  { label: '高层', value: 1 }, 
				  { label: '公寓', value: 2 }, 
				  { label: '别墅', value: 3 }, 
				  { label: '单家', value: 4 }, 
				  { label: '写字楼', value: 5 }, 
				  { label: '商铺', value: 6}, 
				  { label: '土地', value: 7 }, 
				],
				options4: [ 
				  { label: '排序', value: 0 },
				  { label: '倒序', value: 1 },
				  { label: '升序', value: 2 },
			   ],
			   list:[],//new Array(20).fill(0),
			   type :1,
			   pageNum:1,
			   pageSize:10,
			   city: '佛山',
			   province:'广东省',
			   district:'南海区',// code: "440605"
			   loadding:false,
			};
		},
		created() {
		   	 
		},
		methods:{
			getItemImg(e){
				console.log("数据",e);
				var url = this.mainImg(parseInt(e.propertyType),e.ztPicture)
				console.log("数据",url);
				var background = `url(${url}) center center / 100% 100%`; 
				return { background } 
			},
			change1(index){ this.col1 = {...this.options1[index]};this.search()},
			change2(index){ this.col2 = {...this.options2[index]};this.search()},
			change3(index){ this.col3 = {...this.options3[index]};this.search()},
			change4(index){ this.col4 = {...this.options4[index]};this.search()},
			sureCity(choose){
			   console.log(choose);	
			   this.province = choose.province.name
			   this.district = choose.province.area
			   //this.city = choose.city.name.replace("市","")
			   this.city = choose.city.name
			},
			onChoose(item){
				uni.setStorageSync("id", (9||item.id))
				this.toPage('/pages/search/detail')
			},
			async search(){
				this.pageNum = 1;
				this.load([]);
			},
			async load(arr){
			   	this.loadding = true;
				var res = await this.ajax('/wx/property/list',{
					propertyStatus:this.col2.value-1 == -1 ?'': this.col2.value-1,
					propertyType:this.col3.value-1 == -1 ?'': this.col3.value-1,
					isAsc:this.col4.value == 1,
					city:this.city,
					province:this.province,
					propertyName:this.keyword,
					pageNum:this.pageNum,
					pageSize:this.pageSize,
				})
				var res = await this.ajax('/wx/property/list')
				this.list = arr.concat(res.rows)
				this.loadding = false;
			},
			handleScroll(e){
				 
			},
			handleScrollEnd(e){
				console.log(e);
				if(this.loadding) return;
				this.pageNum =  this.pageNum + 1
				this.load(this.list)
			},
			 
		}
		
	}
</script>

<style lang="scss">
	.search-page {
		font-size: 12px;

		.addr-btn {
			width: 100px;
			height: 30px;
			background: #FFD94B;
			color: #000;
			border: 1px solid #000;
			margin: 0 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50px;
		}

		.nut-searchbar {
			padding: 10px 0 6px 0;
		}

		.search-line {
			padding: 5px 10px;
			align-items: center;
		}

		/* 列表样式相关 */

		.col {
			display: flex;
			flex-direction: column;
			height: 100vh;
		}

		.item {
			margin: 10px 0;
		}

		.bg-img {
			height: 200px;
			background: url(https://unsplash.it/100/100?random) center center / 100% 100%;
		}

		.bg-title-txt {
			font-size: 18px;
			font-weight: 600;
			margin: 10px 0;
		}

		.tags {
			margin: 5px 0;
		}

		.tag {
			background: #FBD100;
			padding: 2px 10px;
			font-size: 12px;
			margin: 0 10px 5px 0;
			border-radius: 50px;
		}

		.attrs {
			margin: 5px 0;
		}

		.attr {
			flex: 1;
			text-align: center;
			font-size: 12px;
		}

		.attr1 {
			color: #FFF100;
			text-align: left;
		}

		.attr2 {
		 color: #ccc;
		}

		.list {
			margin-top: 10px;
			flex: 1;
			overflow: auto;
		}

		.search-item {
			margin: 0 10px;
		}
	}
</style>
